import React, { useState, useEffect } from 'react'
import classnames from 'classnames'
import { Spin } from 'antd'
import { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import style from './Index.module.less'
import { useOverTime, useGroupOverTime, useSuspension, useExtend } from './hook'

function TypeList ({ value, onChange }) {
  return (
    <span className={style['t-list']}>
      <span className={classnames(style['t-li'], { [style.active]: value === 0 })} onClick={() => onChange(0)}>全部</span>
      {[1, 2, 3, 4].map(li => {
        const i = li === 4 ? '4+' : li + '次'
        return (
          <span className={classnames(style['t-li'], { [style.active]: value === li })} key={li} onClick={() => onChange(li)}>{i}</span>
        )
      })}
    </span>
  )
}

// 前往全委预警
function toAllWarningCase (addWindow, activeType) {
  addWindow({ id: 'AllWarningCase', title: '案件预警', componentName: 'AllWarningCase', meta: { activeType } })
}

// 前往中止案件列表页
function toSuspension (addWindow) {
  addWindow({ id: 'SuspensionManage', title: '中止案件', componentName: 'SuspensionManage', meta: { } })
}

// 前往延长审限
function toExtend (addWindow, type) {
  addWindow({ id: 'ExtendTimeManage', title: '延长审限', componentName: 'ExtendTimeManage', meta: { formData: { count_inlimit: type } } })
}

function Main ({ addWindow }) {
  const [type, setType] = useState(0)
  const [overTimeNum, overTimeLoading] = useOverTime()
  const [groupOverTimeNum, groupOverTimeLoading] = useGroupOverTime()
  const [suspensionNum, suspensionLoading] = useSuspension()
  const [extendMap, extendLoading] = useExtend()
  const [extendNum, setExtendNum] = useState(0)
  useEffect(() => {
    setExtendNum(extendMap[type])
  }, [extendMap, type])
  return (
    <div className={style.container}>
      <Spin wrapperClassName={style.block} spinning={overTimeLoading}>
        <div className={style['block-inner']}>
          <div className={style['title-line']}>超审限</div>
          <div className={style['value-line']}>
            <span className={style['value-link']} onClick={() => toAllWarningCase(addWindow, '已延期审限')}>{overTimeNum}</span>
          </div>
        </div>
      </Spin>
      <Spin wrapperClassName={style.block} spinning={extendLoading}>
        <div className={style['block-inner']}>
          <div className={style['title-line']}>
            <span>审限延长</span>
            <TypeList value={type} onChange={(i) => { setType(i) }} />
          </div>
          <div className={style['value-line']}>
            <span className={style['value-link']} onClick={() => toExtend(addWindow, type)}>
              {extendNum}
            </span>
          </div>
        </div>
      </Spin>
      <Spin wrapperClassName={style.block} spinning={suspensionLoading}>
        <div className={style['block-inner']}>
          <div className={style['title-line']}>中止案件</div>
          <div className={style['value-line']}>
            <span className={style['value-link']} onClick={() => toSuspension(addWindow)}>{suspensionNum}</span>
          </div>
        </div>
      </Spin>
      <Spin wrapperClassName={style.block} spinning={groupOverTimeLoading}>
        <div className={style['block-inner']}>
          <div className={style['title-line']}>延期组庭</div>
          <div className={style['value-line']}>
            <span className={style['value-link']} onClick={() => toAllWarningCase(addWindow, '已延期组庭')}>{groupOverTimeNum}</span>
          </div>
        </div>
      </Spin>
    </div>
  )
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(Main)
